<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>message</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../css/app.css" rel="stylesheet" />
		<link href="../../css/chat-list.css" rel="stylesheet" />
		
		<script src="../../js/mui.min.js"></script>
		<style>
       			.rel-pos{
       				position: relative;
       			}
       			.num-tip{
       				position:absolute;
       				right:-4px;
       				top:-4px;
       			}
       			.media_wrapper{
       				padding:4px;
       			}
       			.media_wrapper img{width:60px;height:60px;}
       			.message-tip{
       				padding:0 8px;
       			}
       			.message-tip .msg-title{
       				font-size: 18px;
       			}
       			..message-tip .msg-content{
       				font-size:16px;
       			}
	

		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav app-main-background-color" >
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">消息</h1>
		</header>
		<div  class="mui-content">
			<div class="mui-fullscreen" style="z-index:1;">
					
					<div class="scroll-list-wrapper clear-top">
						<div class="mui-scroll-wrapper" >
							  <div class="mui-scroll" id="case_chat_list">
									<!--数据列表-->
									<ul class="mui-table-view mui-table-view-chevron">
																		
									</ul>
							  </div>
						</div>
					</div>
			</div>
				
		</div>
		<script src="../../js/jquery-1.12.4.min.js"></script>
		<script src="../../js/mui.lazyload.js"></script>
		<script src="../../js/mui.lazyload.img.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">

				mui.init();
				var page = 1;
				var refreshObj = mui("#case_chat_list").pullToRefresh({
					 down : {
						callback :endPulldownToRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    },
				    up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				});

				function endPulldownToRefresh(){
					console.log("----------endPulldownToRefresh----------");
					page = 1;
					app.listCaseForMsg(page,20,function(data){
							console.log(JSON.stringify(data));
							var table = document.body.querySelector('.mui-table-view');
							table.innerHTML = "";
//							mui('#refreshContainer').pullRefresh().refresh(true);     //恢复滚动
//
//						    mui('#refreshContainer').pullRefresh().scrollTo(0,0,100); //滚动置顶

							var dataList = data.RESULT_DATA;
							console.log(JSON.stringify(dataList));
							
							if(dataList){
								appendContent('.mui-table-view',dataList);
								 mui(document).imageLazyload({
                                	placeholder: '../../images/60x60.gif'
                            });
                           
					}
//						mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //refresh completed
						refreshObj.endPullDownToRefresh();

				},function(){
						console.log("error");
//						mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //refresh completed
						refreshObj.endPullDownToRefresh();
				});




			}
				
				
			function appendContent(container,caseList){

				console.log(JSON.stringify(caseList));
				/*1-已上传 2-已认领 3-审核通过 4-审核不通过 5-已重传*/

				var table = document.body.querySelector(container);
				for (var i = 0 ; i <= caseList.length-1; i++) {
								var li = document.createElement('li');
								$(li).attr("CASE_CODE",caseList[i].CASE_CODE);
								var imageHtml = "";
								var lastMsg = caseList[i].LAST_MSG;
								var tipContent = "";
								
								var unReadNum = caseList[i].UN_READ_NUM;
								var tipNumBag = "";
								
								if(caseList[i].THUMB_PATH){
									imageHtml = '<img class="" data-lazyload="' + app.SERVER_URL + caseList[i].THUMB_PATH + '">';

									//imageHtml = '<img class="mui-media-object mui-pull-left img80" src="' + caseList[i].THUMB_PATH + '">';
								}else {
									imageHtml = '<img class="" src="../../images/60x60.gif">' ;
								}
								if(lastMsg){
									console.log(JSON.stringify(lastMsg));
									var tipContent = lastMsg.NAME + ':' + lastMsg.message;
								}
								if(unReadNum >0 ){
									tipNumBag = '<div class="num-tip">'+
														'<span class="mui-badge mui-badge-danger">' + unReadNum +  '</span>' + 
												'</div>';
								}


								li.className = 'mui-table-view-cell';
								
								
								li.innerHTML = '<div class="mui-pull-left rel-pos media_wrapper">' +
													tipNumBag+
													imageHtml +
												'</div>' + 
												'<div class="mui-media-body message-tip">'+
													'<h3 class="mui-ellipsis msg-title">' + caseList[i].CASE_CODE +  '</h3>' +
													
													'<p class="mui-ellipsis msg-content">'+
														tipContent
													'</p>'+
													
												'</div>';
								console.log(li.innerHTML);
								table.appendChild(li);
				}
			}
			
			
			function refreshData(){
				if (mui.os.plus) {
				    mui.plusReady(function() {
				      setTimeout(function() {
				        	refreshObj.pullDownLoading();
				      }, 500);

				    });
				  } else
				 {

				     mui.ready(function() {
				    		refreshObj.pullDownLoading();
				    });
				 }

			}
			
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				page++;

				app.listCaseForMsg(page,20,function(data){
						var table = document.body.querySelector('.mui-table-view');
						var caseList = data.result_data;
						if(caseList){

							appendContent('.mui-table-view',caseList);
							 mui(document).imageLazyload({
                                placeholder: '../../images/60x60.gif'
                            });

						}
						
//							mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
						refreshObj.endPullUpToRefresh(false);



				},function(){
						plus.nativeUI.toast("加载出错");
//						mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
						refreshObj.endPullUpToRefresh(true);
				});


			}
			
			
			mui(".mui-table-view").on('tap','li',function(e){
					var CASE_CODE = $(this).attr("CASE_CODE");
					mui.openWindow({
								url:"/html/case/chat.html",
								id:"/html/case/chat.html",
								createNew:true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								},
								extras:{
										"CASE_CODE":CASE_CODE
			    				},

					});
				});
				
			window.addEventListener('onLogin', function() {
				console.log('receive onLogin');
				refreshData();
				
			},false);
			
		
			mui(document).imageLazyload({
				placeholder: '../../images/60x60.gif'
			});	
			refreshData();
			mui.back = function(event){
				var current = plus.webview.currentWebview();
				current.close();
			}
				
		</script>
	</body>

</html>    